<template>
  <el-dialog v-model="props.boxValue" title="判断分类正误" width="700" :before-close="handleClose">
    <span class="classify">
      <!-- <div class="one">
        <span> 分类是：</span>{{ valueName }}-{{ timeName }}-{{ fileName }}
      </div> -->
      <div class="two">
        <div>
          <span>若不正确，请选择正确分类：</span>
          <el-select v-model="valueName" placeholder="请选择正确的类" size="large" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div>
          <span>时间的修改：</span>
          <el-input v-model="timeName"  placeholder="请输入正确的时间"></el-input>
        </div>
        <div>
          <span>文件名的修改：</span>
          <el-input v-model="fileName" placeholder="请输入正确的文件名" style="width: 280px;"></el-input>
        </div>
      </div>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive,computed } from 'vue'
import { modify } from '../api/edit'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const store = useStore()
const router = useRouter()

const props = defineProps({
  boxValue: Boolean
})

// console.log(time)

// const file = store.state.class.fileName
// const category = 
// console.log(store.state.class.category)
const valueName = computed({
  // console.log(store.state.class.value)
  // console.log(store.state.class.value.time)
  get() {
        return store.state.class.value.category || ''
   },
   set(newValue) {
    return store.commit('classifyCategory',newValue)
   }
}) 
// console.log(valueName.value)
// ref(category)
// const a = () => {
//   console.log('111')
// }
// const updateTime = (event) =>{
//   console.log('1111')
//   // console.log(e)
//   const time = event
//   store.commit('classifyTime',time)
// }
const timeName = computed({
    get() {
    return store.state.class.value.time || ''
   },
   set(newValue) {
    // store.state.class.value.time = newValue
    return store.commit('classifyTime',newValue)
   }
})

const fileName = computed({
  get() {
    return store.state.class.value.fileName || ''
   },
   set(newValue) {
    return store.commit('classifyFileName',newValue)
   }
})
// console.log()



const options = [
  {
    value: '1',
    label: '第一类：干部履历表',
  },
  {
    value: '2',
    label: '第二类：自传材料',
  },
  {
    value: '3',
    label: '第三类：鉴定、考核材料',
  },
  {
    value: '4a',
    label: '第4-1类：学历学位材料',
  },
  {
    value: '4b',
    label: '第4-2类：专业技术职务材料',
  },
  {
    value: '4c',
    label: '第4-3类：科研学术材料',
  },
  {
    value: '4d',
    label: '第4-4类：培训材料',
  },
  {
    value: '5',
    label: '第五类：政审材料',
  },
  {
    value: '6',
    label: '第六类：党团材料',
  },
  {
    value: '7',
    label: '第七类：奖励材料',
  },
  {
    value: '8',
    label: '第八类：处分材料',
  },
  {
    value: '9a',
    label: '第9-1类：工资材料',
  },
  {
    value: '9b',
    label: '第9-2类：任免材料',
  },
  {
    value: '9c',
    label: '第9-3类：出国（境）审批材料',
  },
  {
    value: '9d',
    label: '第9-4类：会议代表材料',
  },
  {
    value: '10',
    label: '第十类：其他材料',
  },
]

const emits = defineEmits(['ChangeBoxVisible'])

const cancel = () => {
  emits('ChangeBoxVisible')
}

const confirm = async () => {
 if(valueName.value !== '' && fileName.value !== ''){
  // if(typeof(valueName.value) === 'string'){ 
     switch(valueName.value){
        case '第一类：干部履历表': 
        valueName.value = '1';
        break;
        case '第二类：自传材料':
        valueName.value = '2';
        break;
        case '第三类：鉴定、考核材料':
        valueName.value = '3';
        break;
        case '第4-1类：学历学位材料':
        valueName.value = '4a';
        break;
        case '第4-2类：专业技术职务材料':
        valueName.value = '4b';
        break;
        case '第4-3类：科研学术材料':
        valueName.value = '4c';
        break;
        case '第4-4类：培训材料':
        valueName.value = '4d';
        break;
        case '第五类：政审材料': 
        valueName.value = '5';
        break;
        case '第六类：党团材料':
        valueName.value = '6';
        break;
        case '第七类：奖励材料':
        valueName.value = '7';
        break;
        case '第八类：处分材料':
        valueName.value = '8';
        break;
        case '第9-1类：工资材料':
        valueName.value = '9a';
        break;
        case '第9-2类：任免材料':
        valueName.value = '9b';
        break;
        case '第9-3类：出国（境）审批材料':
        valueName.value = '9c';
        break;
        case '第9-4类：会议代表材料':
        valueName.value = '9d';
        break;
        case '第十类：其他材料': 
        valueName.value = '10';
        break;
        default:
        console.log('查找错误或符合发送格式')
        break;
     }
  //    const file = {
  //   time: store.state.class.value.time,
  //   category: store.state.class.value.category,
  //   fileName: store.state.class.value.fileName
   
  // }
   const file = {
    time: timeName.value,
    category: valueName.value,
    fileName: fileName.value
  }
  const emptyFile = { }
  // console.log(store.state.class.value.fileName)
  // const file = timeName.value + value.value + fileName.value
  const res = await modify(file)
  console.log(res)
  if (res.msg == 'success') {
    ElMessage({
      message: '分类成功，可以进行浏览',
      type: 'success',
      offset: 50
    })
    emits('ChangeBoxVisible')
    store.commit('classify',emptyFile)
    router.push('/scan')
  } else {
    ElMessage.error('分类失败，请重新分类')
  }
 
//   }else{
//   const file = {
//     time: timeName.value,
//     category: valueName.value,
//     fileName: fileName.value
//   }
//   const emptyFile = { }
//   // const file = timeName.value + value.value + fileName.value
//   const res = await modify(file)
//   console.log(res)
//   if (res.msg == 'success') {
//     ElMessage({
//       message: '分类成功，可以进行浏览',
//       type: 'success'
//     })  
//     emits('ChangeBoxVisible')  
//     store.commit('classify',emptyFile)
//     router.push('/scan')
//   } else {
//     ElMessage.error('分类失败，请重新分类')
//   }

//  }
}else{
  ElMessage.error('请将输入完整内容')
}
}

const handleClose = () => {
  emits('ChangeBoxVisible')
}
</script>
<style scoped>
.el-dialog .classify {
  font-size: 16px;
}

.el-dialog .classify .one {
  margin-bottom: 20px;
}

.el-dialog .classify .two {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* margin-bottom: 10px; */
}

.el-dialog .classify .two .el-input {
  width: 200px;
}
</style>